CSS ग्रिड ट्रैक साइज़िंग: इंट्रिंसिक और एक्सट्रिंसिक नियंत्रण में महारत हासिल करना

CSS ग्रिड लेआउट जटिल और रिस्पॉन्सिव वेब लेआउट बनाने के लिए एक शक्तिशाली उपकरण है। इसकी प्रमुख शक्तियों में से एक इसकी लचीली ट्रैक साइज़िंग क्षमताएं हैं, जो आपको पंक्तियों और कॉलम के आकार को सटीकता से नियंत्रित करने की अनुमति देती हैं। अनुकूलनीय और रखरखाव योग्य लेआउट बनाने के लिए विभिन्न ट्रैक साइज़िंग कीवर्ड और फ़ंक्शंस को समझना महत्वपूर्ण है। यह लेख CSS ग्रिड में इंट्रिंसिक और एक्सट्रिंसिक साइज़िंग की उन्नत अवधारणाओं पर प्रकाश डालता है, यह पता लगाता है कि वे आपको ऐसे लेआउट बनाने में कैसे सक्षम करते हैं जो विभिन्न सामग्री और स्क्रीन आकारों के लिए सहजता से अनुकूल होते हैं।

ग्रिड ट्रैक्स और साइज़िंग को समझना

इंट्रिंसिक और एक्सट्रिंसिक साइज़िंग की बारीकियों में जाने से पहले, आइए CSS ग्रिड ट्रैक्स की मूलभूत अवधारणाओं को फिर से देखें।

ग्रिड ट्रैक्स क्या हैं?

ग्रिड ट्रैक्स एक ग्रिड लेआउट की पंक्तियाँ और कॉलम होते हैं। वे उस संरचना को परिभाषित करते हैं जिस पर ग्रिड आइटम रखे जाते हैं। इन ट्रैक्स का आकार समग्र लेआउट और ग्रिड के भीतर सामग्री के वितरण को सीधे प्रभावित करता है।

ट्रैक साइज निर्दिष्ट करना

आप grid-template-rows और grid-template-columns प्रॉपर्टीज़ का उपयोग करके ट्रैक साइज़ को परिभाषित कर सकते हैं। ये प्रॉपर्टीज़ स्पेस-सेपरेटेड मानों की एक सूची स्वीकार करती हैं, जहाँ प्रत्येक मान संबंधित ट्रैक के आकार का प्रतिनिधित्व करता है। उदाहरण के लिए:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
}

            

              
                Copy
              
            
          

यह कोड तीन कॉलम और दो पंक्तियों वाला एक ग्रिड बनाता है। पहला और तीसरा कॉलम प्रत्येक उपलब्ध स्थान का 1 अंश (fr) लेता है, जबकि दूसरा कॉलम 2 अंश लेता है। पंक्तियों का आकार उनकी सामग्री के आधार पर स्वचालित रूप से निर्धारित होता है।

इंट्रिंसिक बनाम एक्सट्रिंसिक साइज़िंग

उन्नत ग्रिड ट्रैक साइज़िंग का मूल इंट्रिंसिक और एक्सट्रिंसिक साइज़िंग के बीच के अंतर को समझने में निहित है। ये अवधारणाएँ यह निर्धारित करती हैं कि किसी ट्रैक का आकार उसकी सामग्री और उपलब्ध स्थान के आधार पर कैसे निर्धारित किया जाता है।

इंट्रिंसिक साइज़िंग: सामग्री-संचालित

इंट्रिंसिक साइज़िंग का मतलब है कि एक ग्रिड ट्रैक का आकार उस ट्रैक में रखे गए ग्रिड आइटम्स की सामग्री द्वारा निर्धारित किया जाता है। ट्रैक सामग्री को समायोजित करने के लिए विस्तारित या संकुचित होगा, कुछ सीमाओं तक। इंट्रिंसिक साइज़िंग कीवर्ड में शामिल हैं:

• auto: डिफ़ॉल्ट मान। ट्रैक का आकार ट्रैक में ग्रिड आइटम्स के सबसे बड़े न्यूनतम आकार के योगदान द्वारा निर्धारित किया जाता है। अधिकांश मामलों में, इसका प्रभावी अर्थ यह है कि ट्रैक सामग्री को ओवरफ़्लो किए बिना फिट करने के लिए पर्याप्त बड़ा होगा, लेकिन यह ग्रिड आइटम्स पर सेट min-width/min-height मानों से प्रभावित हो सकता है।
• min-content: ट्रैक को उस सामग्री के लिए आवश्यक सबसे कम जगह में फिट करने के लिए आकार दिया जाता है, बिना ओवरफ़्लो के। उदाहरण के लिए, टेक्स्ट सबसे छोटे संभव बिंदु पर रैप होगा, भले ही वह शब्दों को अजीब तरह से तोड़ दे।
• max-content: ट्रैक को उस सामग्री के लिए आवश्यक सबसे बड़ी जगह में फिट करने के लिए आकार दिया जाता है, बिना ओवरफ़्लो के। टेक्स्ट के लिए, इसका मतलब है कि यह जितना संभव हो सके रैपिंग से बचने की कोशिश करेगा, जिससे संभावित रूप से बहुत चौड़े या लंबे ट्रैक बन सकते हैं।
• fit-content(length): ट्रैक को max-content और निर्दिष्ट length में से जो छोटा हो, उसके आकार का बनाया जाता है। यह आपको ट्रैक के लिए एक अधिकतम आकार निर्धारित करने की अनुमति देता है, जबकि अभी भी इसे अपनी सामग्री के आधार पर सिकुड़ने देता है।

उदाहरण: min-content और max-content के साथ इंट्रिंसिक साइज़िंग

दो कॉलम वाले एक परिदृश्य पर विचार करें। पहले कॉलम को min-content के साथ और दूसरे को max-content के साथ आकार दिया गया है। यदि पहले कॉलम की सामग्री एक लंबा शब्द है, तो इसे न्यूनतम सामग्री आकार के भीतर फिट करने के लिए किसी भी संभावित बिंदु पर तोड़ा जाएगा। दूसरा कॉलम, हालांकि, सामग्री को बिना रैप किए समायोजित करने के लिए विस्तारित होगा।

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Short text</div>
</div>

            

              
                Copy
              
            
          

इस उदाहरण में, "Supercalifragilisticexpialidocious" शब्द पहले कॉलम में कई लाइनों में टूट जाएगा, जबकि "Short text" दूसरे कॉलम में एक ही लाइन पर रहेगा। यह दर्शाता है कि इंट्रिंसिक साइज़िंग सामग्री की अंतर्निहित आकार आवश्यकताओं के अनुकूल कैसे होती है।

उदाहरण: fit-content() के साथ इंट्रिंसिक साइज़िंग

`fit-content()` फ़ंक्शन तब उपयोगी होता है जब आप चाहते हैं कि कोई ट्रैक सामग्री-आकार का हो, लेकिन उसकी अधिकतम आकार सीमा भी हो। इसका उपयोग कॉलम या पंक्तियों को बहुत बड़ा होने से रोकने के लिए किया जा सकता है, जबकि अगर सामग्री छोटी हो तो उन्हें सिकुड़ने की अनुमति भी मिलती है।

            .grid-container {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-gap: 10px;
}

            

              
                Copy
              
            
          

इस उदाहरण में, पहला कॉलम अपनी सामग्री को फिट करने के लिए विस्तारित होगा, लेकिन 200px से अधिक चौड़ा नहीं होगा। दूसरा कॉलम बची हुई जगह ले लेगा। यह उन लेआउट को बनाने के लिए उपयोगी है जहां आप चाहते हैं कि एक कॉलम लचीला हो, लेकिन बहुत अधिक जगह न ले।

एक्सट्रिंसिक साइज़िंग: स्थान-संचालित

दूसरी ओर, एक्सट्रिंसिक साइज़िंग का मतलब है कि एक ग्रिड ट्रैक का आकार सामग्री के बाहर के कारकों द्वारा निर्धारित किया जाता है, जैसे कि ग्रिड कंटेनर में उपलब्ध स्थान या एक निश्चित आकार मान। एक्सट्रिंसिक साइज़िंग कीवर्ड में शामिल हैं:

• length: एक निश्चित लंबाई मान (जैसे, 100px, 2em, 50vh)। ट्रैक ठीक इसी आकार का होगा, सामग्री की परवाह किए बिना।
• percentage: ग्रिड कंटेनर के आकार का प्रतिशत (जैसे, 50%)। ट्रैक उपलब्ध स्थान का यह प्रतिशत लेगा।
• fr (fractional unit): ग्रिड कंटेनर में अन्य सभी ट्रैक्स को आकार दिए जाने के बाद उपलब्ध स्थान के एक अंश का प्रतिनिधित्व करता है। यह ट्रैक्स के बीच स्थान वितरित करने का सबसे लचीला तरीका है।

उदाहरण: fr यूनिट्स के साथ एक्सट्रिंसिक साइज़िंग

fr यूनिट विभिन्न स्क्रीन आकारों के अनुकूल रिस्पॉन्सिव लेआउट बनाने के लिए अमूल्य है। ट्रैक्स को भिन्नात्मक इकाइयां निर्दिष्ट करके, आप यह सुनिश्चित करते हैं कि वे उपलब्ध स्थान को आनुपातिक रूप से साझा करें।

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

इस उदाहरण में, ग्रिड कंटेनर में दो कॉलम हैं। पहला कॉलम उपलब्ध स्थान का 1 अंश लेता है, जबकि दूसरा कॉलम 2 अंश लेता है। यदि ग्रिड कंटेनर 600px चौड़ा है, तो पहला कॉलम 200px चौड़ा होगा, और दूसरा कॉलम 400px चौड़ा होगा (किसी भी ग्रिड गैप को घटाकर)। यह सुनिश्चित करता है कि स्क्रीन आकार की परवाह किए बिना कॉलम हमेशा अपने आनुपातिक संबंध बनाए रखें।

उदाहरण: प्रतिशत और निश्चित लंबाई के साथ एक्सट्रिंसिक साइज़िंग

            .grid-container {
  display: grid;
  grid-template-columns: 200px 50% 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

इस उदाहरण में, पहले कॉलम को `200px` की एक निश्चित चौड़ाई पर सेट किया गया है। दूसरा कॉलम ग्रिड कंटेनर की चौड़ाई का 50% लेगा। अंत में, तीसरा कॉलम `1fr` यूनिट का उपयोग करता है, इसलिए यह पहले दो कॉलमों को आकार दिए जाने के बाद बची हुई जगह ले लेगा।

इंट्रिंसिक और एक्सट्रिंसिक साइज़िंग का संयोजन: minmax()

minmax() फ़ंक्शन आपको इंट्रिंसिक और एक्सट्रिंसिक साइज़िंग को संयोजित करने की अनुमति देता है, जिससे ट्रैक आकारों पर और भी अधिक नियंत्रण मिलता है। यह एक ट्रैक के लिए स्वीकार्य आकारों की एक श्रृंखला को परिभाषित करता है, जिसमें न्यूनतम और अधिकतम दोनों मान निर्दिष्ट होते हैं।

            minmax(min, max)
            

              
                Copy
              
            
          

• min: ट्रैक का न्यूनतम आकार। यह कोई भी मान्य ट्रैक साइज़िंग मान हो सकता है, जिसमें इंट्रिंसिक कीवर्ड (auto, min-content, max-content) या एक्सट्रिंसिक मान (length, percentage, fr) शामिल हैं।
• max: ट्रैक का अधिकतम आकार। यह भी कोई भी मान्य ट्रैक साइज़िंग मान हो सकता है। यदि `max` `min` से छोटा है, तो `max` को अनदेखा कर दिया जाता है, और `min` का उपयोग किया जाता है।

उदाहरण: रिस्पॉन्सिव कॉलम के लिए minmax() का उपयोग करना

minmax() का एक सामान्य उपयोग रिस्पॉन्सिव कॉलम बनाना है जिनकी न्यूनतम चौड़ाई हो लेकिन वे उपलब्ध स्थान को भरने के लिए विस्तारित हो सकें।

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

यहाँ, repeat(auto-fit, minmax(200px, 1fr)) यथासंभव उतने कॉलम बनाता है जो कम से कम 200px चौड़े हों लेकिन शेष स्थान को भरने के लिए विस्तारित हो सकें। auto-fit कीवर्ड यह सुनिश्चित करता है कि खाली कॉलम ढह जाएं, जिससे एक लचीला और रिस्पॉन्सिव लेआउट बनता है।

उदाहरण: इंट्रिंसिक साइज़िंग के साथ minmax() का संयोजन

            .grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

इस उदाहरण में, पहला कॉलम कम से कम अपनी न्यूनतम सामग्री के आकार जितना चौड़ा होगा, लेकिन `300px` से अधिक नहीं होगा। दूसरा कॉलम शेष स्थान ले लेगा।

व्यावहारिक अनुप्रयोग और सर्वोत्तम प्रथाएँ

मजबूत और अनुकूलनीय लेआउट बनाने के लिए इंट्रिंसिक और एक्सट्रिंसिक साइज़िंग को समझना महत्वपूर्ण है। यहाँ कुछ व्यावहारिक अनुप्रयोग और सर्वोत्तम प्रथाएँ दी गई हैं जिन्हें ध्यान में रखना चाहिए:

• रिस्पॉन्सिव नेविगेशन: ऐसे नेविगेशन आइटम बनाने के लिए minmax() का उपयोग करें जिनकी न्यूनतम चौड़ाई हो लेकिन वे नेविगेशन बार में उपलब्ध स्थान को भरने के लिए विस्तारित हो सकें।
• लचीले कार्ड लेआउट: ऐसे कार्ड लेआउट बनाने के लिए repeat(auto-fit, minmax()) का उपयोग करें जो स्वचालित रूप से विभिन्न स्क्रीन आकारों में समायोजित हो जाते हैं, यह सुनिश्चित करते हुए कि कार्ड छोटी स्क्रीन पर सहजता से रैप हों।
• सामग्री-जागरूक साइडबार: साइडबार को उनकी सामग्री के आधार पर आकार देने के लिए min-content या max-content का उपयोग करें, जिससे वे आवश्यकतानुसार विस्तारित या संकुचित हो सकें।
• निश्चित चौड़ाई से बचें: ऐसे लेआउट बनाने के लिए सापेक्ष इकाइयों (%, fr, em) के पक्ष में निश्चित चौड़ाई (px) के उपयोग को कम करें जो विभिन्न स्क्रीन आकारों और उपयोगकर्ता की प्राथमिकताओं के अनुकूल हों।
• पूरी तरह से परीक्षण करें: यह सुनिश्चित करने के लिए कि वे सही ढंग से प्रस्तुत होते हैं और एक सुसंगत उपयोगकर्ता अनुभव प्रदान करते हैं, हमेशा अपने ग्रिड लेआउट का विभिन्न उपकरणों और स्क्रीन आकारों पर परीक्षण करें।

उन्नत ग्रिड साइज़िंग तकनीकें

बुनियादी कीवर्ड और फ़ंक्शंस के अलावा, CSS ग्रिड ट्रैक साइज़ को ठीक करने के लिए और अधिक उन्नत तकनीकें प्रदान करता है।

repeat() फ़ंक्शन

repeat() फ़ंक्शन एक ही आकार के कई ट्रैक्स बनाने को सरल बनाता है। यह दो तर्क लेता है: दोहराव की संख्या और ट्रैक का आकार।

            repeat(number, track-size)
            

              
                Copy
              
            
          

उदाहरण के लिए:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

यह इसके बराबर है:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

repeat() फ़ंक्शन का उपयोग auto-fit और auto-fill कीवर्ड के साथ भी किया जा सकता है ताकि ऐसे रिस्पॉन्सिव ग्रिड लेआउट बनाए जा सकें जो उपलब्ध स्थान के अनुसार स्वचालित रूप से समायोजित हो जाएं।

auto-fit और auto-fill कीवर्ड्स

इन कीवर्ड का उपयोग repeat() फ़ंक्शन के साथ ऐसे रिस्पॉन्सिव ग्रिड बनाने के लिए किया जाता है जो ग्रिड में आइटम की संख्या और उपलब्ध स्थान के अनुकूल होते हैं। उनके बीच मुख्य अंतर यह है कि वे खाली ट्रैक्स को कैसे संभालते हैं।

• auto-fit: यदि सभी ट्रैक्स खाली हैं, तो ट्रैक्स 0 चौड़ाई तक ढह जाएंगे।
• auto-fill: यदि सभी ट्रैक्स खाली हैं, तो ट्रैक्स अपना आकार बनाए रखेंगे।

उदाहरण: रिस्पॉन्सिव कॉलम के लिए auto-fit का उपयोग करना

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

इस उदाहरण में, ग्रिड यथासंभव उतने कॉलम बनाएगा जो कम से कम 200px चौड़े हों लेकिन शेष स्थान को भरने के लिए विस्तारित हो सकें। यदि सभी कॉलम भरने के लिए पर्याप्त आइटम नहीं हैं, तो खाली कॉलम 0 चौड़ाई तक ढह जाएंगे।

अंतर्राष्ट्रीयकरण (i18n) और स्थानीयकरण (l10n) के लिए विचार

एक वैश्विक दर्शक वर्ग के लिए लेआउट डिजाइन करते समय, विभिन्न भाषाओं और लेखन दिशाओं के प्रभाव पर विचार करना महत्वपूर्ण है। भाषाओं के बीच टेक्स्ट की लंबाई काफी भिन्न हो सकती है, जो ट्रैक आकार ठीक से कॉन्फ़िगर नहीं होने पर लेआउट को प्रभावित कर सकती है। अंतर्राष्ट्रीयकृत लेआउट डिजाइन करने के लिए यहां कुछ सुझाव दिए गए हैं:

• सापेक्ष इकाइयों का उपयोग करें: पिक्सेल जैसी निश्चित इकाइयों के बजाय em, rem, और प्रतिशत जैसी सापेक्ष इकाइयों को प्राथमिकता दें ताकि टेक्स्ट उपयोगकर्ता की फ़ॉन्ट आकार वरीयताओं के अनुसार स्केल हो सके।
• इंट्रिंसिक साइज़िंग: min-content, max-content, और fit-content() जैसे इंट्रिंसिक साइज़िंग कीवर्ड का उपयोग करें ताकि यह सुनिश्चित हो सके कि ट्रैक भाषा की परवाह किए बिना सामग्री के आकार के अनुकूल हों।
• लॉजिकल प्रॉपर्टीज: बाएं-से-दाएं (LTR) और दाएं-से-बाएं (RTL) दोनों भाषाओं का समर्थन करने के लिए left और right जैसी फिजिकल प्रॉपर्टीज के बजाय inline-start और inline-end जैसी लॉजिकल प्रॉपर्टीज का उपयोग करें।
• परीक्षण: किसी भी संभावित समस्या को पहचानने और उसे दूर करने के लिए विभिन्न भाषाओं और लेखन दिशाओं के साथ अपने लेआउट का परीक्षण करें। विभिन्न भाषाओं में पाए जाने वाले लंबे स्ट्रिंग्स का अनुकरण करें।

निष्कर्ष

CSS ग्रिड ट्रैक साइज़िंग रिस्पॉन्सिव और अनुकूलनीय वेब लेआउट बनाने के लिए एक शक्तिशाली और बहुमुखी उपकरण है। इंट्रिंसिक और एक्सट्रिंसिक साइज़िंग की अवधारणाओं में महारत हासिल करके, minmax() फ़ंक्शन को समझकर, और repeat() फ़ंक्शन का लाभ उठाकर, आप ऐसे लेआउट बना सकते हैं जो विभिन्न सामग्री और स्क्रीन आकारों के लिए सहजता से अनुकूल हों। वैश्विक दर्शकों के लिए डिज़ाइन करते समय अंतर्राष्ट्रीयकरण और स्थानीयकरण के प्रभाव पर विचार करना याद रखें।

विभिन्न ट्रैक साइज़िंग तकनीकों के साथ प्रयोग करें और CSS ग्रिड की अनंत संभावनाओं का पता लगाएं। अभ्यास और इन अवधारणाओं की ठोस समझ के साथ, आप किसी भी प्रोजेक्ट के लिए परिष्कृत और उपयोगकर्ता-अनुकूल वेब लेआउट बनाने के लिए अच्छी तरह से सुसज्जित होंगे।